<template>
  <div class="question-message-container" ref="questionMessage">
    <div class="message-container">
      <h1 class="title">{{ questionInfo.title }}</h1>
      <div class="function-area">
        <followButton />
        <write-button />
        <button class="invite"><Icon type="md-person-add" />邀请问答</button>
        <button><Icon type="md-thumbs-up" />好问题</button>
        <button><Icon type="ios-text-outline" />添加评论</button>
        <button><Icon type="ios-paper-plane" />分享</button>
      </div>
      <div class="number-container">
        <div class="num-one">
          <span>关注者</span><br /><br>
          <span class="number">{{answersNum}}</span>
        </div>
        <div class="num-two">
          <span>被浏览</span><br /><br>
          <span class="number">{{viewsNum}}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import WriteButton from "@/components/question/button/WriteButton";
import FollowButton from "@/components/question/button/FollowButton";

export default {
  name: "QuestionMessage",
  props: {
    questionInfo: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
     
    };
  },
  computed: {
    answersNum() {
      return parseFloat(this.questionInfo.answers).toLocaleString()
    },
    viewsNum() {
      return parseFloat(this.questionInfo.views).toLocaleString()
    }
  },
  mounted() {
    //questionMessage组件的高度传递给quetionHeader

    this.$Bus.$emit('show',this.$refs.questionMessage.offsetHeight)
  },
  components: {
    WriteButton,
    FollowButton,
  },
};
</script>

<style scoped lang="scss">
.question-message-container {
  padding: 1.6rem 0;
  width: 100%;
  min-width: 100rem;
  background-color: #fff;
  margin-top: 0.5rem;
  box-shadow: 0 0.1rem 0.3rem rgba(18, 18, 18, 0.1);
  .message-container {
    position: relative;
    width: 101.6rem;
    padding-left: 2.5rem;
    margin: 0 auto;
    .function-area {
      display: flex;
      padding-bottom: 1.2rem;
      button {
        color: #8590a6;
      }
      .invite {
        width: 10.9rem;
        height: 3.2rem;
        background-color: #fff;

        border: 0.1rem solid #8590a6;
      }
      > * {
        margin-right: 2rem;
      }
    }
    .number-container {
      display: flex;
      position: absolute;
      color: #8590a6;
      text-align: center;
      font-size: 1.4rem;
      right: 5rem;
      top: 0;
      .num-one {
        width: 10rem;
      }
      .num-two {
        width: 10rem;
        border-left: .1rem solid #ebebeb;
      }
      .number {
        line-height: 1.6rem;
        font-size: 1.8rem;
        font-weight: 600;
        color: #121212;
      }
    }
  }
  .title {
    line-height: 3.2rem;
    font-size: 2.2rem;
    font-weight: 600;
    margin-bottom: 2rem;
  }
}
</style>